<template>
  <div class="userLabel">
    <!-- 其他账户 -->
    <div class="flex otherInput" :class="{'fullInput': !(accountTrue && accountNameInput!=='')}">
      <span class="word">{{$t('renew.eosname')}}</span>
      <el-input v-model.trim="accountNameInput" class="accountName"
      :placeholder="$t('tronExchange.enterAccountName')"
      @clear="handleInputBlur"
      @blur="handleInputBlur" clearable></el-input>
      <div v-if="accountTrue && accountNameInput!==''">
        <span class="ml mr5">{{ $t('renew.nowGrade') }}</span>
        <span class="icon" style="cursor: pointer;">
          <img v-if="user"
          :src="handleGetVipLogo()" alt="">
        </span>
        <p style="padding-left: 10px;" v-if="otherAccountInfo && otherAccountInfo.consumeLevel && !otherAccountInfo.vipMode">
          （{{$t('renew.expire', { time : expireTime})}}）
          <!-- （{{ otherAccountInfo && otherAccountInfo.expireTime | dateFormat }} {{ $t('renew.expire',) }}到期） -->
        </p>
      </div>
      <span class="inputError" v-if="getAccount_iserror">{{ $t('renew.otherNoAccount') }}</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import moment from 'moment';
import { vipLogo } from '@/utils/wallet';

export default {
  name: 'userLabel', // 用户输入模块
  data() {
    return {
      accountNameInput: '', // 用户名
      accountTrue: false,
      getAccount_iserror: false,
      expireTime: ''
    }
  },
  components: {},
  props: {
    user: Object,
    vipMode: Number,
    otherAccountInfo: Object,
    unstakeList: Array,
    accountName: String,
    accountActive: Number,
  },
  watch: {
    accountNameInput: function change() {
      if (this.accountTrue && this.accountNameInput.length < 12) {
        this.accountTrue = false;
      }
    },
    'otherAccountInfo.expireTime': {
      handler(val) {
        this.expireTime = moment(val).format('YYYY-MM-DD');
      },
      immediate: true
    }
  },
  computed: {
  },
  created() {},
  mounted() {
    this.accountNameInput = this.accountName;
    if (this.otherAccountInfo && this.otherAccountInfo.account) {
      this.accountNameInput = this.otherAccountInfo.account;
      this.handleInputBlur();
    }
    if (this.accountNameInput) {
      this.accountTrue = true;
    }
  },
  beforeDestroy() {},
  methods: {
    handleInputBlur() {
      if (this.accountNameInput === '') {
        this.$emit('listenUserLabel', 'noAccount');
        return;
      }
      this.handleValidateReceive().then((res) => {
        if (res) {
          const theAccountStaked = this.unstakeList.find(v => v.account === this.accountNameInput)
            ? this.unstakeList.find(v => v.account === this.accountNameInput).number : 0;
          this.getAccount_iserror = false;
          this.accountTrue = true;
          const obj = {
            theAccountStaked,
            accountNameInput: this.accountNameInput
          }
          this.$emit('listenUserLabel', 'hasAccount', obj);
          return;
        }
        this.$emit('listenUserLabel', 'noAccount');
        this.accountTrue = false;
        this.getAccount_iserror = true;
      })
    },
    // 验证账户是否存在
    async handleValidateReceive() {
      const nodeChecked = this.$store.state.app.nodeChecked;
      const nodeobj = nodeChecked.eos;
      const kip = nodeobj.url;
      const accountParams = {
        account_name: this.accountNameInput
      };
      const back = await axios.post(`${kip}/v1/chain/get_account`, JSON.stringify(accountParams)).then((result) => {
        if (result.status !== 200) return false;
        return true;
      }).catch(() => false);
      return back;
    },
    // 获取VIP - Logo
    handleGetVipLogo() {
      let memberLevel = 0;
      if (this.user.vipMode === 0) {
        memberLevel = this.user.consumeLevel;
      }
      if (this.user.vipMode === 1) {
        memberLevel = this.user.stakeLevel;
      }
      return vipLogo(memberLevel || 0, 'NDX');
    },
  },
}
</script>
<style lang="scss" scoped>
.userLabel {
  .otherInput {
    position: relative;
    margin: 20px 0 20px;

    span:nth-child(1) {
      width: 95px;
    }

    .accountName {
      width: 160px;
    }

    .inputError {
      width: 200px;
      position: absolute;
      left: 95px;
      bottom: -18px;
      color: #E51C23;
    }
  }

  .fullInput {
    span:nth-child(1) {
      width: 95px;
    }
    .accountName {
      width: 260px;
    }
  }
}
</style>
